<template>
	<view class="content" id="content">
		<view class="top_cate">
			<view class="top_search" @click="$navTo('/pages/product/search')">
				<!-- <uni-icons color="#333" type="back" size="22" @click="$navBack()"></uni-icons> -->
				<uni-search-bar class="flex1" :readonly="true" bgColor="#fff" radius="10" placeholder="请输入您要搜索的商品" v-model="keywords" @clear="tabtap" cancelButton="none"></uni-search-bar>
			</view>
			<view class="heng_cate" v-show="isheng&&cateList.length>0">
				<scroll-view class="h_cate_list" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
					<view class="h_cate_item" v-for="(item,index) in cateList" :class="{'h_cate_active':cateId==item.id}" @click="changebigCate(item.id,index)">
						<view class="h_cate_img" :class="{'h_cate_img_active':cateId==item.id}"><image :src="item.thumb"></image></view>
						<view class="h_cate_name" :class="{'h_cate_name_active':cateId==item.id}">{{item.name}}</view>
						<view class="h_cate_tran" v-show="cateId==item.id"></view>
					</view>
				</scroll-view>
				<view class="heng_open" @click="changeHeng">
					<view>展开</view>
					<uni-icons type="list" size="16"></uni-icons>
				</view>
			</view>
			<uni-transition ref="ani" custom-class="transition" mode-class="slide-top"  :duration="280" :show="!isheng">
				<view class="all_cate">
					<view>全部分类</view>
					<view class="h_cate_list">
						<view class="h_cate_item" v-for="(item,index) in cateList" :class="{'h_cate_active':cateId==item.id}" @click="changebigCate(item.id,index)">
							<view class="h_cate_img" :class="{'h_cate_img_active':cateId==item.id}"><image :src="item.thumb"></image></view>
							<view class="h_cate_name" :class="{'h_cate_name_active':cateId==item.id}">{{item.name}}</view>
						</view>
					</view>
					<view class="flex_center all_close" @click="changeHeng">
						<view>点击收起</view>
						<uni-icons color="#999" type="up" size="16"></uni-icons>
					</view>
				</view>
			</uni-transition>
		</view>
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item,index) in flist" :key="item.id" class="f-item b-b"
				:class="{active: item.id === currentId}" @click="tabtap(item,index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y @scrolltolower="getGoods" class="right-aside" :scroll-top="tabScrollTop">
			<view class="s-list">
				<view class="t-list" v-if="list&&list.length>0">
					<view class="t-item" v-for="item in list" :key="item.id" @click.stop="$navTo('/pages/product/product?id='+item.id)">
						<view class="t-item-img">
							<image :src="item.thumb"></image>
						</view>
						<view class="t-item-info">
							<view class="clamp2">{{item.title}}</view>
							<view class="t-item-price">
								<view class="t-item-new"><text class="t-small">￥</text>{{Number(item.agentprice)}}<text class="t-small" v-if="item.hasoption==1">起</text></view>
								<view class="t-item-old">￥{{Number(item.productprice)}}</view>
							</view>
							<view class="t-item-bt">最高补贴{{Number(item.btrate)}}%</view>
						</view>
						<text></text>
					</view>
				</view>
				<view class="empty_loading">
					<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
					<text v-show="isempty">到底了~</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 0,
				flist: [],
				slist: [],
				tlist: [],
				mid: 0,
				keywords: '',
				page: 0,
				list: [],
				issearch: false,
				isempty: false,
				isloading: false,
				cateList: [],
				cateId: 0,
				isheng: true,
				scrollLeft: 0,
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				curTwoIndex: 0,
				code : ''
			}
		},
		onLoad(options) {
			this.getCate(options.cateId,options.currentId);
			if(options.mid){
				this.mid = options.mid;
			}
			if(options.code) this.code = options.code;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
			
		},
		onReady() {
			// 判断是不是ios，是否发生白屏
			uni.getSystemInfo({
				success: (res) => {
					if (res.platform == 'ios') {
						const query = uni.createSelectorQuery().in(this);
						var isRecovery = true;
						query
							.select('#content')
							.boundingClientRect(data => {
								if (data) isRecovery = false;
							})
							.exec();
						var timer = setTimeout(() => {
							if (isRecovery) {
								uni.reLaunch({
									url: '/pages/category/category'
								})
								clearTimeout(timer);
								timer = null;
							}
						}, 500)
					}
				},
			})
		},
		methods: {
			// 展开 收起
			changeHeng(){
				this.isheng = !this.isheng;
			},
			 // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.h_cate_list').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
					console.log(this.contentScrollW)
				}).exec();
				query.selectAll('.h_cate_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.cateList[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.cateList[i].width = data[i].width
					}
				}).exec()
			},
			// 获取一级分类列表
			getCate(cateId,currentId){
				this.$axios('Util/categorynew', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.cateList = res.data.data.category;
						setTimeout(()=>{
							// 获取标题区域宽度，和每个子元素节点的宽度
							this.getScrollW()
						},1000)
						if(cateId){
							this.cateId = cateId;
							this.getCateTwo(currentId);
						}else{
							this.cateId = this.cateList[0].id;
							this.getCateTwo();
						}
					}
				})
			},
			// 一级分类点击
			changebigCate(id,index){
				if(this.cateId == id) return;
				this.cateId = id;
				this.page = 0;
				this.list = [];
				this.flist = [];
				this.issearch = false;
				this.keywords = '';
				this.isheng = true;
				this.curIndex = index;
				this.isempty = false;
				this.curTwoIndex = 0;
				this.scrollLeft = this.cateList[index].left - this.contentScrollW / 2 + this.cateList[index].width / 2;
				this.getCateTwo();
			},
			// 获取二级分类
			getCateTwo(currentId){
				this.isloading = true;
				this.$axios('Util/categorylist', "POST", 'shop',
					{cate:this.cateId},
				).then(res => {
					if (res.data.code == 200) {
						this.flist = res.data.data.list;
						if(this.flist.length>0){
							if(currentId){
								this.currentId = currentId;
							}else{
								this.currentId = this.flist[0].id;
							}
							this.getList();
						}else{
							this.isloading = false;
							this.isempty = true;
						}
					}
				})
			},
			//二级分类点击
			tabtap(item,index) {
				this.issearch = false;
				this.page = 0;
				this.list = [];
				this.curTwoIndex = index;
				if(item.id){
					this.currentId = item.id;
				}
				this.getList();
			},
			getGoods(){
				if(this.issearch){
					this.searchList();
				}else{
					this.getList();
				}
			},
			// 获取二级分类商品
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('home/homegoods', 'POST', 'shop', {
					id: this.currentId,
					page: this.page,
					brandid:this.currentId
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
						// 如果为空，跳到下一个子分类
						if(data.length<=0){
							if(this.curTwoIndex<this.flist.length-1){
								this.curTwoIndex++;
								this.currentId = this.flist[this.curTwoIndex].id;
								this.page = 0;
								this.getList();
							}
						}
					}
				})
			},
			// 点击搜索
			searchTap() {
				if (this.keywords === '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.issearch = true;
				this.menuIdx = '';
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			// 搜索商品列表
			searchList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page,
					ccate:this.currentId
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			getToken(){
				/*#ifdef H5*/
				this.$axios('login/autoGzlogin','POST','member',{
					mid: this.mid,
					code: this.code,
				}).then(res=>{
					if(res.data.code == 300001){
						this.$navTo(res.data.data);
					}else if(res.data.code == 200){
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.getSharePath();
					}
				})
				/*#endif*/
				/*#ifndef H5*/
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
							}
						})
					}
				})
				/*#endif*/
			}
		}
	}
</script>

<style lang='scss'>
	.top_cate{
		position: fixed;
		width: 100%;
		z-index: 10;
		background: linear-gradient(to right,#f5edfc,#fff);
		padding-top: calc(var(--status-bar-height) + 20rpx);
		.top_search{
			display: flex;
			align-items: center;
			width: 100%;
			padding-left: 10rpx;
		}
		.uni-searchbar__box{
			justify-content: flex-start;
		}
		.uni-searchbar{
			width: 70%;
		}
	}
	.top0{
		position: fixed;
		top: -100%;
	}
	.heng_cate{
		display: flex;
		padding: 0 10rpx 8rpx 20rpx;
		justify-content: space-between;
	}
	.h_cate_list{
		width: calc(100% - 34rpx);
		white-space: nowrap;
		.h_cate_item{
			display: inline-block;
			color: #333;
			padding-right: 22rpx;
			font-size: 24rpx;
			position: relative;
			text-align: center;
			.h_cate_img{
				width: 104rpx;
				height: 104rpx;
				border: 4rpx solid #fff;
				border-radius: 40rpx;
				margin: 0 auto;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.h_cate_img_active{
				border: 4rpx solid #8615E1;
			}
			.h_cate_name{
				padding: 4rpx 12rpx;
				margin-top: 10rpx;
			}
			.h_cate_name_active{
				background: #8615E1;
				color: #fff;
				border-radius: 20rpx;
			}
			.h_cate_tran{
				width: 0px;
				height: 0px;
				border: 6rpx solid transparent;
				border-top-color: #8615E1;
				margin: 0 auto;
			}
		}
		.h_cate_active{
			font-weight: 600;
			color: #333333;
		}
	}
	.heng_open{
		width: 34rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		color: #999;
		font-size: 24rpx;
	}
	.all_cate{
		background: linear-gradient(to right,#f5edfc,#fff);
		padding: 0 20rpx 20rpx 20rpx;
		/* transition: all 1s; */
		/* box-shadow: -3rpx 700rpx 9rpx 10rpx rgba(50,50,50,.3); */
		.h_cate_list{
			display: flex;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0 10rpx;
			width: 100%;
			.h_cate_item{
				display: block;
				width: 20%;
				margin-right: 0;
				margin-bottom: 10rpx;
				padding-right: 0;
			}
		}
		.all_close{
			text-align: center;
			font-size: 24rpx;
			color: #999;
			padding-top: 20rpx;
			view{
				margin-right: 20rpx;
			}
		}
	}
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}
	.noneData{
		padding-top: 20rpx;
		color: #999;
		text-align: center;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #f8f8f8;
		padding-top: calc(var(--status-bar-height) + 320rpx);
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 120rpx;
		font-size: 28rpx;
		color: $font-color-base;
		position: relative;
		padding: 0 4rpx;
		text-align: center;
		&.active {
			color: $base-color;
			background: #fff;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 60rpx;
				width: 6rpx;
				background-color: $base-color;
				border-radius: 0 4rpx 4rpx 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
		margin-top: calc(var(--status-bar-height) + 320rpx);
		background: #fff;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		padding-right: 20rpx;
	}

	.t-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.t-item-img{
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.t-item-info{
			flex: 1;
			.t-item-price{
				display: flex;
				align-items: center;
				margin: 12rpx 0;
				flex-wrap: wrap;
				.t-item-new{
					font-size: 36rpx;
					color: #AF141D;
					.t-small{
						font-size: 24rpx;
					}
				}
				.t-item-old{
					color: #c3c2c2;
					text-decoration: line-through;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
			.t-item-bt{
				color: $bg-color;
				font-size: 24rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
			}
		}
	}
</style>
